<template>
  <div class="f-select-category min-w-[200px] p-[10px]">
    <!-- 搜索 -->
    <!-- <div>
      <el-input v-model="title" class="w-full" clearable @clear="getUserLabelGroupList" @keyup.enter="getCategory" :placeholder="t('group.search.placeholder')">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div> -->
    <!-- 列表 -->
    <el-scrollbar class="mt-[10px]">
      <el-menu :default-active="String(active)" @select="handleSelect">
        <el-menu-item v-for="(item, index) in list" :index="String(item.group_id)" :key="index">
          <el-tooltip :content="item.title">
            <el-text truncated>{{item.title}}</el-text>
          </el-tooltip>
          <!-- <div v-if="item.id !== 0" class="btn">
            <el-dropdown @command="handleCommand($event, item)">
                <el-icon><MoreFilled /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="1">{{ t('edit') }}</el-dropdown-item>
                  <el-dropdown-item command="2">{{ t('delete') }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div> -->
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
    <div class="pt-[10px] flex">
      <el-button v-if="false" class="w-full block" type="primary" text @click="handleAdd">{{t('group.add')}}</el-button>
      <el-button class="w-full block" type="primary" text @click="handleSync">{{t('group.sync')}}</el-button>
    </div>

    <!-- 新建分类弹框 -->
    <f-form-model ref="formModelRef" is="UserLabelGroupForm" @change="getUserLabelGroupList"></f-form-model>
  </div>
</template>
<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue'
import { deleteCategoryApi, getUserLabelGroupListApi, syncLabelGroupApi } from '../../api'
import FFormModel from '../../components/f-form-model'
import { ElMessage, ElMessageBox } from 'element-plus'
import { t } from '@/lang'

const prop = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['change', 'update:modelValue'])

const formModelRef = ref()
const list = ref<any[]>([])
const active = computed({
    get () {
        return prop.modelValue
    },
    set (value) {
        emit('update:modelValue', value)
    }
})
/**
 * 获取分类列表
 */
async function getUserLabelGroupList () {
    const res = await getUserLabelGroupListApi()
    list.value = [{ group_id: '', title: t('group.all') }, ...res.data.map(item => ({ ...item, title: item.name }))]
}

/**
 * 新增
 */
async function handleSync () {
    await syncLabelGroupApi()
    ElMessage.success('同步成功')
    getUserLabelGroupList()
}

/**
 * 新增
 */
function handleAdd () {
    formModelRef.value?.show(t('group.add'))
}

/**
 * 编辑
 * @param row
 */
function handleEdit (row: ICategoryItem) {
    formModelRef.value?.show(t('group.update'), row)
}

/**
 * 删除数据
 * @param row
 */
async function handleDelete (row: ICategoryItem) {
    const action = await ElMessageBox.alert(t('deleteTips'), t('alert.title'), {
        type: 'warning',
        showCancelButton: true,
        cancelButtonText: t('alert.cancel'),
        confirmButtonText: t('alert.confirm')
    })
    if (action === 'confirm') {
        await deleteCategoryApi(row.id)
        ElMessage.success(t('deleteSuccess'))
        getUserLabelGroupList()
    }
}

/**
 * 更多操作
 * @param value
 * @param row
 */
function handleCommand (value:String, row: ICategoryItem) {
    switch (value) {
        case '1':
            handleEdit(row)
            break
        case '2':
            handleDelete(row)
            break
    }
}

function handleSelect (value:string) {
    active.value = value
    emit('change', value)
}

onMounted(() => {
    getUserLabelGroupList()
})
</script>

<style lang="scss" scoped>

.f-select-category {
  height: calc(100vh - 100px);
  position: sticky;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  background-color: var(--el-bg-color);

  --el-menu-item-height: 40px;

  .el-scrollbar {
    flex: 1;
  }

  .el-menu {
    width: 100%;
    border:none
  }

  .el-menu-item {
    position: relative;
    padding-right: 30px;

    .btn {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      align-items: center;
      justify-content: center;
    }

    &.is-active {
      background-color: var(--el-color-primary-light-8);

      .btn {
        display: flex;
      }
    }
  }

}
</style>
